<template>
  <nav class="tabbar" role="tablist">
    <button
      v-for="item in tabList"
      :key="item.path"
      class="tab-item"
      :class="{ active: currentPath === item.path }"
      type="button"
      role="tab"
      :aria-selected="currentPath === item.path"
      @click="handleTabClick(item.path)"
    >
      <span class="tab-icon">
        <component :is="item.icon" />
        <!-- 消息红点提示 -->
        <span v-if="item.badge && hasUnread" class="badge-dot"></span>
      </span>
      <span class="tab-label">{{ item.label }}</span>
    </button>
  </nav>
</template>

<script setup>
import { computed, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useNotificationStore } from '@/stores/notification'

const router = useRouter()
const route = useRoute()
const notificationStore = useNotificationStore()

// 是否有未读消息
const hasUnread = computed(() => notificationStore.hasUnread)

const IconHome = markRaw({
  name: 'IconHome',
  template: `
    <svg viewBox="0 0 1024 1024" aria-hidden="true">
      <path fill="currentColor" d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"/>
    </svg>
  `
})

const IconCoach = markRaw({
  name: 'IconCoach',
  template: `
    <svg viewBox="0 0 1024 1024" aria-hidden="true">
      <path fill="currentColor" d="M512 512m-213.333333 0a213.333333 213.333333 0 1 0 426.666666 0 213.333333 213.333333 0 1 0-426.666666 0Z"/>
      <path fill="currentColor" d="M810.666667 810.666667c0-170.666667-128-298.666667-298.666667-298.666667s-298.666667 128-298.666667 298.666667h597.333334z"/>
    </svg>
  `
})

const IconSport = markRaw({
  name: 'IconSport',
  template: `
    <svg viewBox="0 0 1024 1024" aria-hidden="true">
      <path fill="currentColor" d="M917.333333 746.666667c0 11.733333-4.266667 21.333333-12.8 29.866666-8.533333 8.533333-19.2 12.8-29.866666 12.8H149.333333c-11.733333 0-21.333333-4.266667-29.866666-12.8-8.533333-8.533333-12.8-19.2-12.8-29.866666V277.333333c0-11.733333 4.266667-21.333333 12.8-29.866666 8.533333-8.533333 19.2-12.8 29.866666-12.8h725.333334c11.733333 0 21.333333 4.266667 29.866666 12.8 8.533333 8.533333 12.8 19.2 12.8 29.866666 12.8v469.333334z m-85.333333-426.666667H192v384h640V320z m-256 213.333333c-23.466667 0-42.666667-8.533333-59.733333-25.6-17.066667-17.066667-25.6-36.266667-25.6-59.733333s8.533333-42.666667 25.6-59.733333c17.066667-17.066667 36.266667-25.6 59.733333-25.6s42.666667 8.533333 59.733333 25.6c17.066667 17.066667 25.6 36.266667 25.6 59.733333s-8.533333 42.666667-25.6 59.733333c-17.066667 17.066667-36.266667 25.6-59.733333 25.6z"/>
    </svg>
  `
})

const IconMall = markRaw({
  name: 'IconMall',
  template: `
    <svg viewBox="0 0 1024 1024" aria-hidden="true">
      <path fill="currentColor" d="M832 256H704V128c0-35.2-28.8-64-64-64H384c-35.2 0-64 28.8-64 64v128H192c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64V320c0-35.2-28.8-64-64-64zM384 128h256v128H384V128z m448 768H192V320h128v64c0 17.6 14.4 32 32 32s32-14.4 32-32v-64h256v64c0 17.6 14.4 32 32 32s32-14.4 32-32v-64h128v576z"/>
    </svg>
  `
})

const IconMine = markRaw({
  name: 'IconMine',
  template: `
    <svg viewBox="0 0 1024 1024" aria-hidden="true">
      <path fill="currentColor" d="M512 128c106.039467 0 192 85.9648 192 192S618.039467 512 512 512 320 426.0352 320 320s85.9648-192 192-192z m0 64c-70.692267 0-128 57.307733-128 128s57.307733 128 128 128 128-57.307733 128-128-57.307733-128-128-128z m271.36 448c15.36 0 28.16 10.922667 31.1296 25.4464L817.493333 682.666667C823.466667 725.333333 789.333333 768 746.666667 768H277.333333c-42.666667 0-76.8-42.666667-70.826666-85.333333l3.004266-17.2032C212.48 650.922667 225.28 640 240.64 640h542.72z m-10.4448 64H250.7776l-1.991111 11.4688C246.237867 682.666667 260.9152 704 277.333333 704h469.333334c16.418133 0 31.0784-21.2992 28.535466-40.4992L772.915 650.666667z"/>
    </svg>
  `
})

const tabList = Object.freeze([
  { path: '/training', label: '首页', icon: IconHome, badge: false },
  { path: '/coach', label: '教练', icon: IconCoach, badge: false },
  { path: '/mall', label: '运动', icon: IconSport, badge: false },
  { path: '/dynamic', label: '商城', icon: IconMall, badge: false },
  { path: '/mine', label: '我的', icon: IconMine, badge: false }
])

const currentPath = computed(() => route.path)

const handleTabClick = (path) => {
  if (path !== currentPath.value) {
    router.push(path)
  }
}
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: white;
  border-top: 1px solid #e5e5e5;
  z-index: 1000;
  padding: 0;
}

.tab-item {
  /* 重置所有button默认样式 */
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  
  /* 布局 */
  flex: 1;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  
  /* Flexbox 纵轴堆叠 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  
  /* 间距 */
  padding: 0;
  margin: 0;
  
  /* 视觉 */
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tab-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  position: relative;
}

.tab-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tab-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.tab-item.active {
  color: #333;
}

.tab-item.active .tab-label {
  font-weight: 500;
}

/* 红点徽章样式 */
.badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: #f56c6c;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}
</style>

